<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstarp/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <header class="col-md-2 ">
                <div class="row">
                    <div class="logo col-sm-12">
                        <a href="#">
                            <img src="images/logo.png" alt="">
                        </a>
                    </div>
                    <div class="row">
                        <ul>
                            <li>
                                <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-bag-heart" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5Zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0ZM14 14V5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1ZM8 7.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z" />
                                    </svg> 生活馆</a>
                            </li>
                            <li>
                                <a href="#">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-droplet" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
                                        <path fill-rule="evenodd"
                                            d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z" />
                                    </svg> 自然汇

                                </a>
                            </li>
                            <li>
                                <a href="#" class="glyphicon glyphicon-camera">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-rocket" viewBox="0 0 16 16">
                                        <path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z" />
                                        <path fill-rule="evenodd"
                                            d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073a3.02 3.02 0 0 0-.236.178c-.286.24-.687.65-1.096 1.321C5.861 3.914 5 6.318 5 10.5c0 .858.374 1.48.943 1.893.54.393 1.276.607 2.057.607.781 0 1.516-.214 2.057-.607.569-.413.943-1.035.943-1.893 0-4.263-.862-6.665-1.676-7.984-.406-.659-.805-1.054-1.089-1.28a2.782 2.782 0 0 0-.226-.163Z" />
                                        <path
                                            d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z" />
                                    </svg> 科技潮

                                </a>
                            </li>
                            <li>
                                <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-shop" viewBox="0 0 16 16">
                                        <path
                                            d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.371 2.371 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976l2.61-3.045zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0zM1.5 8.5A.5.5 0 0 1 2 9v6h1v-5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v5h6V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5zM4 15h3v-5H4v5zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3zm3 0h-2v3h2v-3z" />
                                    </svg> 奇趣事</a>
                            </li>
                            <li>
                                <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-sun" viewBox="0 0 16 16">
                                        <path
                                            d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
                                    </svg> 美食节
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>

            <article class="col-md-7">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./upload/lg.png" alt="">
                            <div class="p">阿里百秀</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/1.jpg" alt="">
                        </a>
                        <div class="p">震惊成都 小区护卫长得像马云 市民纷纷求合影</div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/1.jpg" alt="">
                        </a>
                        <div class="p">震惊成都 小区护卫长得像马云 市民纷纷求合影</div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/1.jpg" alt="">
                        </a>
                        <div class="p">震惊成都 小区护卫长得像马云 市民纷纷求合影</div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./upload/1.jpg" alt="">
                        </a>
                        <div class="p">震惊成都 小区护卫长得像马云 市民纷纷求合影</div>
                    </li>

                </ul>
                <div class="row">
                    <div class="content">
                        <div class="c1 col-sm-9 text-muted">正文内容</div>
                        <div class="c2 col-sm-3">
                            <a href="#">
                                <img src="./upload/4.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="content ">
                        <div class="c1 col-sm-9 text-danger">正文内容</div>
                        <div class="c2 col-sm-3">
                            <a href="#">
                                <img src="./upload/4.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="content">
                        <div class="c1 col-sm-9 ">正文内容</div>
                        <div class="c2 col-sm-3">
                            <a href="#">
                                <img src="./upload/4.jpg" alt="">
                            </a>
                        </div>
                    </div>

                </div>
            </article>



            <!-- // aside部分 -->
            <aside class="col-md-3 hidden-md" >
                <div class="asup">
                    <a href="#">
                        <img src="./upload/zgboke.jpg" alt="">
                    </a>
                </div>
                <div class="asup">
                    <a href="#">
                        <img src="./upload/zgboke.jpg" alt="">
                    </a>
                </div>
                <div class="asup">
                    <a href="#">
                        <img src="./upload/zgboke.jpg" alt="">
                    </a>
                </div>

</body>

</html>